import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import { connect } from 'dva'
import {
    Input,
    Button,
    Select,
    Form,
    Modal,
    Row,
    Col,
    Icon,
    message,
    Calendar
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
import Moment from 'moment';
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
import Commonfun from '../../util/map/commonfun';
import startpoint from "../../util/map/static/images/startpoint.png"
import endpoint from "../../util/map/static/images/endpoint.png"
import CanvasLayerUrl from "../../util/map/javascript/CanvasLayer.js"
import mapControlUrl from "../../util/map/mapControl.js"
import mapopacity from "../../../img/mapopacity.png"
import mapstarticon from "../../../img/gjstarticpn.png"
import starttravelicon from "../../../img/starttravel.png"
import traveendicon from "../../../img/travelend.png"
import travecaricon from "../../../img/travelm.png"
var map, point, endcar, startcar, car1, car2;
const formItemLayout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};
const confirm = Modal.confirm;
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            isSearch: false,
            loading: 'none',
            isCalendarShow: "none",
            companyList: [],
            companyiemiList: [],
            companyiemiNumerList: [],
            searchValue: '',
            polylineArr: [],
            searchCompanyId: '',
            searchImei: '',
            isConfirm: false,
            personalValue: ''
        };
    }
    componentWillMount() {
        let self = this;
        const token = localStorage.getItem('token');
        self.props.getCompany({ token: token });
        const userData = JSON.parse(localStorage.getItem('userDetail'));
        let companyList = [];
        let companyiemiList = [];
        let companyiemiNumerList = [];
        self.props.search({
            params: {
                token: token,
                page: 1,
                page_size: 10000,
            },
            func: function (result) {
                let data = result;

                if (data && data.list.length > 0) {
                    for (var i = 0; i < data.list.length - 1; i++) {
                        let item = data.list[i];
                        let company = item.company,
                            imei = item.imei,
                            number = item.number;
                        companyList[number] = company
                        if (imei) {
                            companyiemiList[imei] = company
                            companyiemiNumerList[imei] = number
                        }

                    }
                }
                self.setState({
                    companyList: companyList,
                    companyiemiList: companyiemiList,
                    companyiemiNumerList: companyiemiNumerList
                }, function () {
                    let personData = self.props.personData;
                    if (personData && personData.number) {
                        self.searchImei(personData.number);
                    } else {
                        // 点位
                        self.entityListFun();
                        // self.state.timer1 = setInterval(() => {
                        //     self.entityListFun('refresh');
                        // }, 10000)
                    }

                })


            }
        })
    }
    componentDidMount() {
        let self = this;
        const token = localStorage.getItem('token');
        // this.props.queryStatistics({ token: token });
        self.initMap(120.25965919955, 30.158778336536);

    }
    componentWillUnmount() {
        if (this.state.timer != null) {
            clearInterval(this.state.timer);

        }
        if (this.state.timerTrail != null) {
            clearInterval(this.state.timerTrail);

        }
        if (this.state.timer1 != null) {
            clearInterval(this.state.timer1);

        }
        this.props.savePersonalSelect({});
        message.destroy();

        this.setState = (state, callback) => {
            return;
        };
    }
    // 地图初始化
    initMap = (longitude, latitude) => {
        let self = this;
        map = new BMap.Map("mapWrap", { enableMapClick: false });  //创建地图
        var point = new BMap.Point(longitude, latitude);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
        map.enableKeyboard();//启动键盘操作地图
    }

    ArrayIsEqual = (arr1, arr2) => {//判断2个数组是否相等
        if (arr1 === arr2) {//如果2个数组对应的指针相同，那么肯定相等，同时也对比一下类型
            return true;
        } else {
            if (arr1.length != arr2.length) {
                return false;
            } else {//长度相同
                for (let i in arr1) {//循环遍历对比每个位置的元素
                    if (arr1[i] != arr2[i]) {//只要出现一次不相等，那么2个数组就不相等
                        return false;
                    }
                }//for循环完成，没有出现不相等的情况，那么2个数组相等
                return true;
            }
        }
    }
    // list获取map所有点位信息
    entityListFun = (type) => {
        let self = this;
        const userData = JSON.parse(localStorage.getItem('userMDetail'));
        const token = localStorage.getItem('token');
        let filter = 'deleted:0|sign_id:';
        if (userData.sign) {
            filter = 'deleted:0|sign_id:' + userData.sign;
        } else {
            filter = 'deleted:0|sign_id:0';
        }
        let points = [];
        $.ajax({
            url: `${Service.baseUrl}/admin/entity/list`,
            type: "post",
            dataType: "json",
            data: {
                token: token,
                'filter': filter,
                'company_id': self.state.searchCompanyId,
                'entity_names': self.state.searchImei
            },
            success: function (data) {
                if (data && data.entities) {
                    self.setState({
                        points: data.entities,
                    })
                    if (data.entities && data.entities.length > 0) {
                        self.setState({
                            carstatus: data.entities[0].latest_location.speed
                        })
                        self.addMarksFun(data.entities, type)
                    } else {
                        self.setState({
                            carstatus: 0
                        })
                        message.destroy();
                        message.error('该车辆暂无定位，请检查车辆');
                        return false;
                    }

                }

            }
        })

    }
    // 地图定点
    addMarksFun = (points, type) => {
        // console.log(8888888888888888)
        let self = this;
        let markerArr = points;
        let pointArray = [];
        // 每次定点的时候清空上次点位数据
        self.remove_overlay();
        let imeiArr = self.state.imeiArr;

        for (let i in points) {
            var p0 = markerArr[i].latest_location.longitude;
            var p1 = markerArr[i].latest_location.latitude;
            pointArray[i] = new BMap.Point(p0, p1);
            // 姓名_头像_车牌号_车架号
            let entity_desc = markerArr[i].entity_desc.split('_');
            let entity_name = markerArr[i].entity_name.split('_');
            // console.log(entity_name)
            // console.log(entity_desc)
            let companyType = self.state.companyList[entity_desc[2]];
            // 快递简称
            let company_shortname = points[i].company_shortname;

            if (entity_name[1]) {
                var maker = self.addMarker(new window.BMap.Point(p0, p1), i, entity_desc, companyType, company_shortname);
                // self.addInfoWindow(maker, markerArr[i]);
                pointArray[i] = new BMap.Point(p0, p1);

                // 图标一个点表示展示如下
                maker.addEventListener("click", function () {
                    // 车牌号搜索
                    if (entity_desc[2]) {
                        // 展开抽屉
                        self.setState({
                            drawerWidth: '0',
                            riWidth: '45'
                        })
                        console.log(entity_desc[2])
                        self.searchImei(entity_desc[2])
                    }

                });
            }

        }

        // map.showMarkers();
        // 让所有点在视野范围内
        // console.log(pointArray);
        if (!type) {
            map.setViewport(pointArray);
        }

    }
    remove_overlay = () => {
        map.clearOverlays();
    }
    // 根据点的数组自动调整缩放级别
    setZoom(bPoints) {
        var view = map.getViewport(eval(bPoints));
        var mapZoom = view.zoom;
        var centerPoint = view.center;
        map.centerAndZoom(centerPoint, mapZoom);
    }

    // 添加标注
    addMarker = (point, index, desc, companyType, company_shortname) => {
        // 姓名_头像_车牌号_车架号
        let company = ''
        const token = localStorage.getItem('token');

        // var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
        var myIcon = new BMap.Icon(mapopacity,
            new BMap.Size(0, 0), {
                // offset: new BMap.Size(10, 25),
                // imageOffset: new BMap.Size(0, 0 - 11 * 25)

            });
        // var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        //     offset: new BMap.Size(10, 25), // 指定定位位置  
        //     imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移  
        // });
        var marker = new BMap.Marker(point, { icon: myIcon });
        this.addInfoWindow(marker, desc, companyType, company_shortname);
        map.addOverlay(marker);
        return marker;
    }
    addInfoWindow = (marker, poi, companyType, company_shortname) => {
        // console.log(company_shortname)
        // 姓名_头像_车牌号_车架号
        let self = this;
        let entity_desc = poi;
        let text;
        let textCon;
        if (entity_desc[2]) {
            textCon = entity_desc[2]
        } else {
            textCon = company_shortname
        }
        // let entity_desc = poi.entity_desc.split('_');
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        if (company_shortname == '申通') {
            text = '<div class="mapwrap mapwrap1"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '圆通') {
            text = '<div class="mapwrap mapwrap2"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '中通') {
            text = '<div class="mapwrap mapwrap3"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '韵达') {
            text = '<div class="mapwrap mapwrap5"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '百世') {
            text = '<div class="mapwrap mapwrap6"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '邮政') {
            text = '<div class="mapwrap mapwrap0"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '京东') {
            text = '<div class="mapwrap mapwrap7"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else if (company_shortname == '丹鸟') {
            text = '<div class="mapwrap mapwrap8"><span>' + company_shortname + entity_desc[2] + '</span></div>';

        } else {
            if (entity_desc[2]) {
                text = '<div class="mapwrap"><span>' + company_shortname + entity_desc[2] + '</span></div>';
            } else {
                if (company_shortname) {
                    text = '<div class="mapwrap mapwrap7"><span>' + company_shortname + '</span></div>';
                } else {
                    text = '<div class="mapwrap mapwrap7"><span>???</span></div>';
                }

            }

        }
        // if (companyType == 1) {
        //     text = '<div class="mapwrap mapwrap1"><span>' + textCon + '</span></div>';

        // } else if (companyType == 2) {
        //     text = '<div class="mapwrap mapwrap2"><span>' + textCon + '</span></div>';

        // } else if (companyType == 3) {
        //     text = '<div class="mapwrap mapwrap3"><span>' + textCon + '</span></div>';

        // } else if (companyType == 5) {
        //     text = '<div class="mapwrap mapwrap5"><span>' + textCon + '</span></div>';

        // } else if (companyType == 6) {
        //     text = '<div class="mapwrap mapwrap6"><span>' + textCon + '</span></div>';

        // } else {
        //     text = '<div class="mapwrap"><span>' + textCon + '</span></div>';
        // }
        var label = new window.BMap.Label(text, { offset: new window.BMap.Size(20, -10) });
        marker.setLabel(label);
        var clo = "";

        var info = new window.BMap.InfoWindow("<p>" + entity_desc[0] + "</p>"); // 创建信息窗口对象
        label.addEventListener("click", function () {
            // 展开抽屉
            self.setState({
                drawerWidth: '0',
                riWidth: '45',
                isCalendarShow: 'none'
            })
            // console.log(555555)

            let imei = entity_desc[2];

            self.searchImei(imei)
        });
        var openInfoWinFun = function () {
            // alert(111)
            // this.openInfoWindow(info);
        };
        // map.setViewport(points);
    }
    addInfoWindowGj = (marker, poi, companyType) => {
        // console.log(poi)
        // 姓名_头像_车牌号_车架号
        let self = this;
        let number = poi;
        let text;
        // let entity_desc = poi.entity_desc.split('_');
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        if (companyType == 1) {
            text = '<div class="mapwrap mapwrap1"><span>' + number + '</span></div>';

        } else if (companyType == 2) {
            text = '<div class="mapwrap mapwrap2"><span>' + number + '</span></div>';

        } else if (companyType == 3) {
            text = '<div class="mapwrap mapwrap3"><span>' + number + '</span></div>';

        } else if (companyType == 5) {
            text = '<div class="mapwrap mapwrap5"><span>' + number + '</span></div>';

        } else if (companyType == 6) {
            text = '<div class="mapwrap mapwrap6"><span>' + number + '</span></div>';

        } else {
            text = '<div class="mapwrap"><span>' + number + '</span></div>';
        }
        var label = new window.BMap.Label(text, { offset: new window.BMap.Size(-66, -22) });
        marker.setLabel(label);
        var clo = "";

        // var info = new window.BMap.InfoWindow("<p>" + entity_desc[0] + "</p>"); // 创建信息窗口对象

        // map.setViewport(points);
    }
    mindexurlFun = () => {
        this.context.router.push(`/1/app/mindex`);
    }
    mapurlFun = () => {
        this.context.router.push(`/1/app/mmap`);
    }
    myurlFun = () => {
        this.context.router.push(`/1/app/mmy`);
    }

    searchInput = (e) => {
        let self = this;
        let v = e.target.value;
        self.setState({
            searchValue: v
        })

    }
    // 搜索设备
    searchFun = () => {
        let self = this;
        let value = self.state.searchValue;
        if (!value) {
            self.messageConfig();
            return message.info(<span>请输入车牌编号</span>);
            // message.
        }
        self.searchImei(value);
    }
    // 在数据库中搜索
    searchImei = (value) => {
        let self = this;
        // console.log(value)
        let token = localStorage.getItem('token');
        self.setState({ searchValue: value })
        self.props.search({
            params: {
                token: token,
                page: 1,
                page_size: 1,
                number: value
            },
            func: function (result) {
                let data = result;
                if (data && data.list.length > 0) {
                    let imei = data.list[0].imei;
                    if (imei) {
                        self.serarchMap(imei);
                        self.setState({
                            devices: data.list[0],
                        }, function () {
                            let start = new Date(
                                new Date(new Date().toLocaleDateString()).getTime()
                            )
                        })
                        self.setState({
                            riWidth: '425',
                            isSearch: true,
                            isCalendarShow: 'none'
                        });

                    } else {
                        self.messageConfig();
                        message.error('暂设备在地图中未录入');

                    }

                } else {
                    self.messageConfig();
                    message.error('暂无该车牌数据');

                }



            }
        })
    }
    // 搜索调用鹰眼在地图中找到设备信息
    serarchMap = (value) => {
        let self = this;
        const token = localStorage.getItem('token');
        $.ajax({
            url: `${Service.baseUrl}/admin/entity/list`,
            type: "POST",
            dataType: "json",
            data: {
                // 'ak': 'WPMnV0isjviG14MI8DjSjgk8qC2ahH9n',
                // 'service_id': '211131',
                token: token,
                'filter': 'entity_names:' + 'imei_' + value
                // 'entity_name': 'name1'
            },
            success: function (data) {

                if (data && data.entities) {
                    self.setState({
                        points: data.entities
                    })
                    self.remove_overlay();
                    let start = new Date(
                        new Date(new Date().toLocaleDateString()).getTime()
                    )
                    // 用于轨迹回放

                    if (self.state.timer1 != null) {
                        clearInterval(self.state.timer1);
                    }

                    self.mapDataInit(self.state.devices.imei, start);
                    if (self.state.timerTrail != null) {
                        clearInterval(self.state.timerTrail);
                    }
                    // 添加轨迹定时器
                    self.state.timerTrail = setInterval(() => {
                        // self.circleMarker();
                        self.mapDataInit(self.state.devices.imei, start, 'refresh');
                    }, 10000)
                    // self.addMarksFun(data.entities)
                }

            }
        })
    }
    // 取消搜索
    cancelSearch = () => {
        let self = this;
        this.setState({
            isSearch: false,
            searchValue: '',
            drawerWidth: '-275px',
            riWidth: '45',
            markersArr: [],
            polylineArr: [],
            isCalendarShow: "none"
        });

        self.remove_overlay();
        self.props.form.resetFields();
        self.setState({
            searchCompanyId: '',
            searchImei: ''
        }, function () {
            self.entityListFun(); // 重新所有定点
            // 清空轨迹的定时器
            if (self.state.timerTrail != null) {
                clearInterval(self.state.timerTrail);
            }
            // 添加地图定点定时器
            // self.set
            self.state.timer1 = setInterval(() => {
                self.entityListFun();
            }, 10000)
        })

    }
    // 轨迹渲染
    mapDataInit = (equip, date, type) => {

        let self = this;
        const token = localStorage.getItem('token');
        let linerArr = [];
        let polylineArr = [];

        let date1 = date / 1000;
        let date2 = (date1 + 3600 * 24);
        self.setState({
            travelStart: date1
        })
        self.setState({
            candendarValue: date1
        })
        // console.log(date1)
        $.ajax({
            type: "GET",
            url: `${Service.baseUrl}/admin/entity/track`,
            dataType: "json",
            async: false, //同步
            data: {
                // 'ak': 'WPMnV0isjviG14MI8DjSjgk8qC2ahH9n',
                // 'service_id': '211131',
                token: token,
                'entity_name': 'imei_' + equip,
                'start_time': date1,
                'end_time': date2,
                'is_processed': 1 //是否绑路
            },
            success: function (data) {
                // console.log(data)
                if (data.points.length < 1) {
                    message.destroy();
                    message.info('今日暂无轨迹！', 5);
                    clearInterval(self.state.timerTrail);
                    self.messageConfig();
                    self.setState({
                        isPoint: false
                    })
                    return false;
                }
                self.setState({
                    isPoint: true
                })
                message.destroy();
                // console.log(data.points)
                let isEqual = self.ergodicPoints(data.points, equip);
                // console.log(self.state.polylineArr)
                if (isEqual) {
                    self.fineListFun(data.points, '', '', type, equip)
                    // self.polylineFun1(data.points, '', '', type,equip)
                    // self.polylineFun(data.points)
                }


            }


        });

    }
    ergodicPoints = (pointArr, equip) => {

        let self = this;
        let polylineArr = [];
        $.each(pointArr, function (index, item) {
            polylineArr['imei_lat' + equip] = item.latitude;
            polylineArr['imei_lng' + equip] = item.longitude;
        });
        if (self.ArrayIsEqual(polylineArr, self.state.polylineArr)) {
            self.setState({
                polylineArr: polylineArr
            })
            return false;
        } else {
            self.setState({
                polylineArr: polylineArr
            })
            return true;
        }



    }
    ergodicMarks = (markArr) => {
        let self = this;
        let markersArr = [];

        $.each(markArr, function (index, item) {
            markersArr['lat_' + item.entity_name] = item.latest_location.latitude;
            markersArr['log_' + item.entity_name] = item.latest_location.longitude;
        });

        if (self.ArrayIsEqual(markersArr, self.state.markersArr)) {
            return false;
        } else {
            self.setState({
                markersArr: markersArr
            })
            return true;
        }
    }
    fineListFun = (datapoint, starttime, endtime, type, equip) => {
        const token = localStorage.getItem('token');
        let self = this;
        let number = self.state.companyiemiNumerList[equip];
        if (!starttime) {
            starttime = datapoint[0].loc_time;
        }
        // if (!endtime) {
        //     endtime = data[data.length - 1].loc_time;
        // }
        self.props.queryMsgList({
            params: {
                token: token,
                page: 1,
                page_size: 10000,
                keywords: number,
                date: starttime
            },
            func: function (data) {
                // console.log(data.list)
                self.setState({
                    violationList: data.list
                }, function () {
                    self.polylineFun1(datapoint, '', '', type, equip)
                })
            }
        })
        // self.props.queryMsgList({ token: token, page: 1, page_size: 10000, keywords: equip, date: starttime})
    }
    polylineFun1 = (data, starttime, endtime, type, equip) => {
        let that = this;
        let totalPoints = [];
        let viewportPoints = [];
        let violationList = that.state.violationList;
        let companyType = that.state.devices.company_text;
        let numberText = that.state.devices.number;

        if (data.length === 0) {
            return;
        }
        if (!starttime) {
            starttime = data[0].loc_time;
        }
        if (!endtime) {
            endtime = data[data.length - 1].loc_time;
        }

        for (let i = 0; i < data.length; i++) {
            if (data[i].loc_time >= starttime && data[i].loc_time <= endtime) {
                let tempPoint = new BMap.Point(data[i].longitude, data[i].latitude);
                for (let j = 0; j < violationList.length - 1; j++) {

                    if (data[i].loc_time > violationList[j].createtime && data[i].loc_time <= violationList[j].updatetime) {
                        tempPoint.content = violationList[j].content;
                    } else {
                        tempPoint.content = ''
                    }
                }

                tempPoint.speed = data[i].speed ? data[i].speed : 0;
                tempPoint.loc_time = data[i].loc_time;
                tempPoint.height = data[i].height;
                tempPoint.radius = data[i].radius;
                tempPoint.print = that.state.currentEntityPrint;
                tempPoint.printTime = Commonfun.getLocalTime(data[i].loc_time);
                tempPoint.printSpeed = Commonfun.getSpeed(data[i].speed);
                tempPoint.lnglat = data[i].longitude.toFixed(2) + ',' + data[i].latitude.toFixed(2);
                totalPoints.push(tempPoint);
            }
        }


        if (!type) {
            map.setViewport(totalPoints, {
                margins: [80, 0, 0, 200]
            });
        }

        // that.setZoom(totalPoints)
        let updatePointer = function () {
            let nextArray = [];
            let ctx = this.canvas.getContext('2d');
            if (!ctx) {
                return;
            }
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

            if (totalPoints.length !== 0) {
                var lines = 1;
                let lineObj = {};
                let pixelPart = 0;
                const pixelPartUnit = 40;
                for (let i = 0, len = totalPoints.length; i < len - 1; i = i + 1) {
                    // console.log(totalPoints[i].printSpeed)
                    let pixel = map.pointToPixel(totalPoints[i]);
                    let nextPixel = map.pointToPixel(totalPoints[i + 1]);
                    pixelPart = pixelPart + Math.pow(Math.pow(nextPixel.x - pixel.x, 2) + Math.pow(nextPixel.y - pixel.y, 2), 0.5);
                    if (pixelPart <= pixelPartUnit) {
                        continue;
                    }
                    pixelPart = 0;
                    ctx.beginPath();
                    // console.log(totalPoints[i + 1].loc_time - totalPoints[i].loc_time)
                    if (totalPoints[i + 1].loc_time - totalPoints[i].loc_time <= 5 * 60) {
                        // 箭头一共需要5个点：起点、终点、中心点、箭头端点1、箭头端点2

                        let midPixel = new BMap.Pixel(
                            (pixel.x + nextPixel.x) / 2,
                            (pixel.y + nextPixel.y) / 2
                        );

                        // 起点终点距离
                        let distance = Math.pow((Math.pow(nextPixel.x - pixel.x, 2) + Math.pow(nextPixel.y - pixel.y, 2)), 0.5);
                        // console.log(distance)
                        // 箭头长度
                        let pointerLong = 3;
                        let aPixel = {};
                        let bPixel = {};

                        if (nextPixel.x - pixel.x === 0) {

                            if (nextPixel.y - pixel.y > 0) {
                                aPixel.x = midPixel.x - pointerLong * Math.pow(0.5, 0.5);
                                aPixel.y = midPixel.y - pointerLong * Math.pow(0.5, 0.5);
                                bPixel.x = midPixel.x + pointerLong * Math.pow(0.5, 0.5);
                                bPixel.y = midPixel.y - pointerLong * Math.pow(0.5, 0.5);
                            } else if (nextPixel.y - pixel.y < 0) {
                                aPixel.x = midPixel.x - pointerLong * Math.pow(0.5, 0.5);
                                aPixel.y = midPixel.y + pointerLong * Math.pow(0.5, 0.5);
                                bPixel.x = midPixel.x + pointerLong * Math.pow(0.5, 0.5);
                                bPixel.y = midPixel.y + pointerLong * Math.pow(0.5, 0.5);
                            } else {
                                continue;
                            }
                        } else {
                            let k0 = ((-Math.pow(2, 0.5) * distance * pointerLong + 2 * (nextPixel.y - pixel.y) * midPixel.y) / (2 * (nextPixel.x - pixel.x))) + midPixel.x;
                            let k1 = -((nextPixel.y - pixel.y) / (nextPixel.x - pixel.x));
                            let a = Math.pow(k1, 2) + 1;
                            let b = 2 * k1 * (k0 - midPixel.x) - 2 * midPixel.y;
                            let c = Math.pow(k0 - midPixel.x, 2) + Math.pow(midPixel.y, 2) - Math.pow(pointerLong, 2);

                            aPixel.y = (-b + Math.pow(b * b - 4 * a * c, 0.5)) / (2 * a);
                            bPixel.y = (-b - Math.pow(b * b - 4 * a * c, 0.5)) / (2 * a);
                            aPixel.x = k1 * aPixel.y + k0;
                            bPixel.x = k1 * bPixel.y + k0;
                        }
                        ctx.moveTo(aPixel.x, aPixel.y);
                        ctx.lineWidth = 3;
                        ctx.strokeStyle = '#fff';
                        ctx.lineTo(midPixel.x, midPixel.y);
                        ctx.lineTo(bPixel.x, bPixel.y);
                        // ctx.lineTo(aPixel.x, aPixel.y);
                        ctx.lineCap = 'round';

                    }
                    if (totalPoints[i].loc_time >= starttime && totalPoints[i + 1].loc_time <= endtime) {
                        ctx.stroke();
                    }
                }
            }
        };
        let updateBack = function () {
            let nextArray = [];
            let ctx = this.canvas.getContext('2d');
            if (!ctx) {
                return;
            }
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            if (totalPoints.length !== 0) {
                var lines = 1;
                let lineObj = {};

                for (let i = 0, len = totalPoints.length; i < len - 1; i++) {

                    let pixel = map.pointToPixel(totalPoints[i]);
                    let nextPixel = map.pointToPixel(totalPoints[i + 1]);
                    ctx.beginPath();

                    ctx.moveTo(pixel.x, pixel.y);
                    if (totalPoints[i + 1].loc_time - totalPoints[i].loc_time <= 5 * 60) {
                        // 绘制轨迹的时候绘制两次line，一次是底色，一次是带速度颜色的。目的是实现边框效果
                        ctx.lineWidth = 7;
                        ctx.strokeStyle = '#2e91fb';

                        ctx.lineTo(nextPixel.x, nextPixel.y);
                        ctx.lineCap = 'round';

                    } else {
                        lines = lines + 1;
                        let lineNum = lines;
                        nextArray.push([pixel, nextPixel]);
                    }
                    if (totalPoints[i].loc_time >= starttime && totalPoints[i + 1].loc_time <= endtime) {
                        ctx.stroke();
                    }

                }
            }
        };
        let update = function () {
            let nextArray = [];
            let ctx = this.canvas.getContext('2d');
            if (!ctx) {
                return;
            }
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

            if (totalPoints.length !== 0) {
                var lines = 1;
                let lineObj = {};
                for (let i = 0, len = totalPoints.length; i < len - 1; i++) {
                    let pixel = map.pointToPixel(totalPoints[i]);
                    let nextPixel = map.pointToPixel(totalPoints[i + 1]);
                    ctx.beginPath();
                    ctx.moveTo(pixel.x, pixel.y);

                    if (totalPoints[i + 1].loc_time - totalPoints[i].loc_time <= 5 * 60) {
                        // 绘制带速度颜色的轨迹
                        ctx.lineCap = 'round';
                        ctx.lineWidth = 8;
                        let grd = ctx.createLinearGradient(pixel.x, pixel.y, nextPixel.x, nextPixel.y);
                        let speed = totalPoints[i].speed;
                        let speedNext = totalPoints[i + 1].speed;
                        // grd.addColorStop(0, "red");
                        // grd.addColorStop(1, "#4EFF00");
                        // console.log(totalPoints[i].content)
                        if (totalPoints[i].content) {
                            if (totalPoints[i].content == '不按规定道路行驶') {
                                grd.addColorStop(0, "#FFDE00");
                                grd.addColorStop(1, "#FFDE00");
                            } else if (totalPoints[i].content == '逆向行驶') {
                                grd.addColorStop(0, "#FF8400");
                                grd.addColorStop(1, "#FF8400");
                            } else if (totalPoints[i].content.indexOf('超速') != -1) {
                                grd.addColorStop(0, red);
                                grd.addColorStop(1, red);
                            } else {
                                grd.addColorStop(0, "#4EFF00");
                                grd.addColorStop(1, "#4EFF00");
                            }
                        }


                        // grd.addColorStop(0, that.getColorBySpeed(speed));
                        // grd.addColorStop(1, that.getColorBySpeed(speedNext));
                        ctx.strokeStyle = grd;
                        ctx.lineTo(nextPixel.x, nextPixel.y);
                    } else {
                        lines = lines + 1;
                        let lineNum = lines;
                        nextArray.push([pixel, nextPixel]);
                        if (totalPoints[i + 1].loc_time >= starttime && totalPoints[i + 1].loc_time <= endtime) {
                            let partImgStart = new Image();
                            partImgStart.src = travecaricon;
                            let next = nextPixel;
                            partImgStart.onload = function () {
                                let width = [4, 8];
                                ctx.drawImage(partImgStart, next.x - 10, next.y - 30, 54, 54);
                                ctx.font = 'lighter 14px arial';
                                ctx.fillStyle = 'white';
                                ctx.fillText(lineNum, next.x - width[lineNum >= 10 ? 1 : 0], next.y - 15);
                            };
                        }
                        if (totalPoints[i].loc_time >= starttime && totalPoints[i].loc_time <= endtime) {
                            let current = pixel;
                            let partImgEnd = new Image();
                            partImgEnd.src = travecaricon;
                            partImgEnd.onload = function () {
                                let width = [4, 8];
                                ctx.drawImage(partImgEnd, current.x - 10, current.y - 30, 54, 54);
                                ctx.font = 'lighter 14px arial';
                                ctx.fillStyle = 'white';
                                ctx.fillText(lineNum - 1, current.x - width[lineNum >= 10 ? 1 : 0], current.y - 15);
                            };
                        }
                        ctx.lineCap = 'round';
                        ctx.lineWidth = 8;
                        let grd = ctx.createLinearGradient(pixel.x, pixel.y, nextPixel.x, nextPixel.y);
                        let speed = totalPoints[i].speed;
                        let speedNext = totalPoints[i + 1].speed;
                        if (totalPoints[i].content) {
                            if (totalPoints[i].content == '不按信号灯指示行驶') {
                                grd.addColorStop(0, "#930006");
                                grd.addColorStop(1, "#930006");
                            } else if (totalPoints[i].content == '逆向行驶') {
                                grd.addColorStop(0, "#ff000a");
                                grd.addColorStop(1, "#ff000a");
                            } else if (totalPoints[i].content.indexOf('超速') != -1) {
                                grd.addColorStop(0, "#ffdf01");
                                grd.addColorStop(1, "#ffdf01");
                            } else if (totalPoints[i].content.indexOf('未在机动车道行驶') != -1) {
                                grd.addColorStop(0, "#ff8500");
                                grd.addColorStop(1, "#ff8500");
                            } else {
                                grd.addColorStop(0, "#4EFF00");
                                grd.addColorStop(1, "#4EFF00");
                            }
                        }
                        ctx.strokeStyle = grd;
                        ctx.lineTo(nextPixel.x, nextPixel.y);
                    }
                    if (totalPoints[i].loc_time >= starttime && totalPoints[i + 1].loc_time <= endtime) {
                        ctx.stroke();
                    }


                }
            }

            if (totalPoints[0].loc_time >= starttime) {
                let imgStart = new Image();
                imgStart.src = starttravelicon;
                imgStart.onload = function () {
                    let width = [4, 8];
                    ctx.drawImage(imgStart, map.pointToPixel(totalPoints[0]).x - 10, map.pointToPixel(totalPoints[0]).y - 30, 44, 56);
                    ctx.font = 'lighter 14px arial';
                    ctx.fillStyle = 'white';
                    ctx.fillText('1', map.pointToPixel(totalPoints[0]).x - width[lines >= 10 ? 1 : 0], map.pointToPixel(totalPoints[0]).y - 15);
                };
            }
            if (totalPoints[totalPoints.length - 1].loc_time <= endtime) {
                let imgEnd = new Image();
                imgEnd.src = traveendicon;
                imgEnd.onload = function () {
                    let width = [4, 8];
                    ctx.drawImage(imgEnd, map.pointToPixel(totalPoints[totalPoints.length - 1]).x - 10, map.pointToPixel(totalPoints[totalPoints.length - 1]).y - 30, 44, 56);
                    ctx.font = 'lighter 14px arial';
                    ctx.fillStyle = 'white';
                    ctx.fillText(lines, map.pointToPixel(totalPoints[totalPoints.length - 1]).x - width[lines >= 10 ? 1 : 0], map.pointToPixel(totalPoints[totalPoints.length - 1]).y - 15);
                };
            }
        }
        if (totalPoints.length > 0) {
            if (typeof (that.state.canvasLayer) !== 'undefined' || typeof (that.state.canvasLayerBack) !== 'undefined' || typeof (that.state.CanvasLayerPointer) !== 'undefined') {
                map.removeOverlay(that.state.CanvasLayerPointer);
                map.removeOverlay(that.state.canvasLayer);
                map.removeOverlay(that.state.canvasLayerBack);

            }
            that.setState({
                canvasLayerBack: new CanvasLayer({
                    map: map,
                    update: updateBack
                })
            })
            that.setState({
                canvasLayerBack: new CanvasLayer({
                    map: map,
                    update: updateBack
                })
            })
            that.setState({
                canvasLayerBack: new CanvasLayer({
                    map: map,
                    update: updatePointer
                })
            })
            window.canvasLayerBack = new CanvasLayer({
                map: map,
                update: updateBack
            });
            window.canvasLayer = new CanvasLayer({
                map: map,
                update: update
            });
            window.CanvasLayerPointer = new CanvasLayer({
                map: map,
                update: updatePointer
            });

        }
        // mapControl.removeBehaviorOverlay();
        // TrackAction.behavioranalysis();
        // TrackAction.getstaypoint();

        if (typeof (pointCollection) !== 'undefined') {
            map.removeOverlay(pointCollection);
        }
        let options = {
            size: BMAP_POINT_SIZE_HUGE,
            shape: BMAP_POINT_SHAPE_CIRCLE,
            color: 'rgba(0, 0, 0, 0)'
        };

        window.pointCollection = new BMap.PointCollection(totalPoints, options); // 初始化PointCollection
        // pointCollection.addEventListener('mouseover', function (e) {
        //     mapControl.addTrackPointOverlay(e.point, 'trackpointOverlay');
        // });
        // pointCollection.addEventListener('mouseout', function (e) {
        //     mapControl.removeTrackPointOverlay('trackpointOverlay');
        // });
        // pointCollection.addEventListener('click', function (e) {
        // mapControl.removeTrackInfoBox();
        // TrackAction.getaddress(e.point);
        // mapControl.removeTrackPointOverlay('trackpointonOverlay');
        // mapControl.addTrackPointOverlay(e.point, 'trackpointonOverlay');

        // });
        // console.log(totalPoints)
        // console.log(66666)
        map.addOverlay(pointCollection); // 添加Overlay
        // 显示起点

        // var myIcon2 = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        //     offset: new BMap.Size(10, 25), // 指定定位位置  
        //     imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移  
        // });
        // let startcar1 = new BMap.Marker(totalPoints[0], { icon: myIcon2 });
        // map.addOverlay(startcar1);


        // var myIcon1 = new BMap.Icon(starttravelicon,
        //     new BMap.Size(44, 56), {
        //         anchor: new BMap.Size(22, 56),//这句表示图片相对于所加的点的位置
        //         imageOffset: new BMap.Size(0, 0)

        //     }
        // );
        // map.removeOverlay(startcar);
        // startcar = new BMap.Marker(totalPoints[0], { icon: myIcon1 });

        // // endcar.setZIndex(99999)
        // map.addOverlay(startcar);

        // if (totalPoints.length > 100) {
        //     // car1 icon
        //     var myIcon3 = new BMap.Icon(travecaricon,
        //         new BMap.Size(54, 54), {
        //             anchor: new BMap.Size(27, 54),//这句表示图片相对于所加的点的位置
        //             imageOffset: new BMap.Size(0, 0)

        //         }
        //     );
        //     // console.log(totalPoints[totalPoints.length - 1])
        //     map.removeOverlay(car1);
        //     car1 = new BMap.Marker(totalPoints[totalPoints.length - parseInt(totalPoints.length / 3)], { icon: myIcon3 });
        //     map.addOverlay(car1);
        // }

        // if (totalPoints.length > 300) {
        //     // car1 icon
        //     var myIcon4 = new BMap.Icon(travecaricon,
        //         new BMap.Size(54, 54), {
        //             anchor: new BMap.Size(27, 54),//这句表示图片相对于所加的点的位置
        //             imageOffset: new BMap.Size(0, 0)

        //         }
        //     );
        //     // console.log(totalPoints[totalPoints.length - 1])
        //     map.removeOverlay(car2);
        //     car2 = new BMap.Marker(totalPoints[totalPoints.length - parseInt(totalPoints.length / 8)], { icon: myIcon4 });
        //     map.addOverlay(car2);
        // }

        // 终点new
        // var myIcon2 = new BMap.Icon(traveendicon,
        //     new BMap.Size(44, 56), {
        //         anchor: new BMap.Size(22, 56),//这句表示图片相对于所加的点的位置
        //         imageOffset: new BMap.Size(0, 0)

        //     }
        // );
        // // console.log(totalPoints[totalPoints.length - 1])
        // map.removeOverlay(endcar);
        // endcar = new BMap.Marker(totalPoints[totalPoints.length - 1], { icon: myIcon2 });
        // map.addOverlay(endcar);
    }
    polylineFun = (pointArr) => {
        let self = this;
        // let pointArr = pointArr1.slice(1, 4);
        // console.log(pointArr)
        let points = [], points1 = [], points2 = [];
        let point1, point2, point3;
        map.clearOverlays();
        $.each(pointArr, function (index, item) {
            // console.log(index)
            let tempPoint = new BMap.Point(item.longitude, item.latitude);
            tempPoint.speed = item.speed ? item.speed : 0;
            tempPoint.loc_time = item.loc_time;
            tempPoint.height = item.height;
            tempPoint.radius = item.radius;
            // tempPoint.print = that.state.currentEntityPrint;
            // tempPoint.printTime = Commonfun.getLocalTime(item.loc_time);
            // tempPoint.printSpeed = Commonfun.getSpeed(item.speed);
            tempPoint.lnglat = item.longitude.toFixed(2) + ',' + item.latitude.toFixed(2);
            // if (index < 6) {
            //     point1 = new BMap.Point(item.longitude, item.latitude);
            // } else if (index > 5 && index < 30) {
            //     point2 = new BMap.Point(item.longitude, item.latitude);
            // } else {
            //     point3 = new BMap.Point(item.longitude, item.latitude);
            // }
            points.push(tempPoint);
        });
        // points.push(tempPoint);
        // points1.push(point2);
        // points2.push(point3);
        // points.push(point1);
        self.polylineMarker(points, pointArr)
        // self.polylineMarker(points1, point2)
        // self.polylineMarker(points2, point3)

    }
    polylineMarker = (points, pointArr) => {
        // var polyline = new BMap.Polyline(points, {
        //     enableEditing: false, //是否启用线编辑，默认为false
        //     enableClicking: false, //是否响应点击事件，默认为true
        //     strokeWeight: '4', //折线的宽度，以像素为单位
        //     strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
        //     strokeColor: "#33A0D6" //折线颜色
        // });
        // map.addOverlay(polyline); //增加折线

        // map.centerAndZoom(points[pointArr.length - 1], 22);

        // console.log(points)
        var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
        driving.search(new BMap.Point(points[0].lng, points[0].lat), new BMap.Point(points[pointArr.length - 1].lng, points[pointArr.length - 1].lat));
        driving.setSearchCompleteCallback(function () {
            //得到路线上的所有point  
            points = driving.getResults().getPlan(0).getRoute(0).getPath();

            //画面移动到起点和终点的中间  
            let centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (
                points[0].lat +
                points[points.length - 1].lat) / 2);
            map.panTo(centerPoint);
            //连接所有点  
            map.addOverlay(new BMap.Polyline(points, {
                strokeColor: 'blue', //线路颜色
                strokeWeight: 4,//线路大小
                //线路类型(虚线)
                strokeStyle: "dashed"
            }));

            // 显示小车子  
            let label = new BMap.Label("", {
                offset: new BMap.Size(-20, -20)
            });
            let car = new BMap.Marker(points[0]);
            car.setLabel(label);

            map.addOverlay(car);

        });
    }
    // 日历显示
    canclendarwShowFun = () => {
        let self = this;
        // console.log(111)
        if (self.state.isCalendarShow == 'block') {
            self.setState({
                isCalendarShow: 'none'
            })
        } else {
            self.setState({
                isCalendarShow: 'block'
            })
        }

    }
    // 拨打电话
    tellFun = () => {
        this.setState({
            isConfirm: true
        })
    }
    travelFun = () => {
        let self = this;
        // console.log(self.state.devices)
        let parm = [{
            'start': self.state.travelStart,
            'imei': self.state.devices.imei,
            'devices': self.state.devices
        }
        ]
        this.props.saveSelect(parm);
        this.context.router.push(`/1/app/mmaptravel`);
    }
    // 关闭弹出框
    handleCancel = e => {
        this.setState({
            [e]: false
        });
    };

    handleOk = () => {

    }

    // 输入设备号进行搜索
    onSelect = (value) => {
        let self = this;
        let startTime = value.format('YYYY-MM-DD');
        // 清空地图定点
        if (self.state.timer1 != null) {
            clearInterval(self.state.timer1);
        }
        self.setState({
            isCalendarShow: 'none'
        });
        self.remove_overlay();

        if (!self.state.devices.imei) {
            self.messageConfig();
            message.error('暂无轨迹');

            // 清空保存上一次的轨迹
            self.setState({
                polylineArr: []
            })
            return false;
        }

        let startTimes = new Date(startTime).getTime() - 8 * 3600 * 1000;
        // console.log(startTimes)
        self.setState({
            travelStart: startTimes
        })
        self.mapDataInit(self.state.devices.imei, startTimes);
        if (this.state.timerTrail != null) {
            clearInterval(this.state.timerTrail);
        }
        // 添加轨迹定时器
        // this.state.timerTrail = setInterval(() => {
        //     // self.circleMarker();
        //     self.mapDataInit(self.state.devices.imei, startTimes, 'refresh');
        // }, 10000)
    }

    /* 控制提示 */
    messageConfig() {
        message.config({
            top: 100, // 消息距离顶部的位置
            duration: 2, // 默认自动关闭延时，单位秒
            maxCount: 1, // 最大显示数, 超过限制时，最早的消息会被自动关闭
        });
    }
    // 消息通知
    messageUrlFun = () => {
        this.context.router.push(`/1/app/mmessage`);
    }
    // 选择快递公司
    searchCanpanyChange = (value) => {
        let self = this;
        const token = localStorage.getItem('token');
        self.setState({
            searchCompany: value
        })
        self.props.queryPersonalList({ token: token, page: 1, page_size: 1000, company: value })
        clearInterval(self.state.timerfine);
        self.props.form.setFields({
            imei: ''
        });
        self.setState({
            searchCompanyId: value,
            searchImei: '',
            personalValue: ''
        }, function () {
            self.entityListFun();
        })


    }
    // 选择人员中设备号
    searchNumberChange = (value) => {
        let self = this;
        const token = localStorage.getItem('token');
        clearInterval(self.state.timerfine);
        self.setState({
            searchImei: 'imei_' + value,
            personalValue: value
        }, function () {
            self.entityListFun();
        })

    }
    // 跳转
    searchFun = () => {
        let self = this;
        self.context.router.push(`/1/app/mpersonalsearch`);
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { data, company, personaldata } = this.props;
        let vehicleData = data || [];
        // console.log(this.state.personalValue);
        // console.log(this.props);
        return (
            <div className={Style.wrap}>
                <div className={Style.headWrap}>
                    <div className={Style.navTitle}>
                        大屏地图
                        <span className={Style.arrowEdit} onClick={this.messageUrlFun}><em className={Style.bellIcon}></em></span>
                    </div>
                </div>
                <div className={Style.mapWrap} >
                    <div id="mapWrap" className={Style.mapCon}>
                    </div>
                    <div className={Style.mapTopWrap}>
                        <div className={Style.item}>
                            <Form.Item {...formItemLayout} label="">
                                {getFieldDecorator('company', {
                                    rules: [
                                        {
                                            required: false,
                                            message: '请选择快递公司',
                                        },
                                    ],
                                })(
                                    <Select
                                        dropdownClassName="mapSelect"
                                        style={{
                                            width: '100%'
                                        }}
                                        placeholder='请选择快递公司'
                                        onChange={this.searchCanpanyChange.bind(this)}
                                    // value={this.state.type}
                                    >
                                        {
                                            company.map(function (item, i) {
                                                return <Option value={item[0]}>{item[1]}</Option>
                                            })
                                        }
                                    </Select>
                                    )}
                            </Form.Item>

                        </div>
                        <div className={Style.item}>
                            <Form.Item {...formItemLayout} label="">
                                {getFieldDecorator('imei', {
                                    // initialValue: this.state.personalValue || '',
                                    rules: [
                                        {
                                            required: false,
                                            message: '请选择快递员',
                                        },
                                    ],
                                    ref: 'imei'
                                })(
                                    <Select
                                        dropdownClassName="mapSelect"
                                        style={{
                                            width: '100%'
                                        }}
                                        placeholder='请选择快递员'
                                        onChange={this.searchNumberChange.bind(this)}
                                    // value={this.state.personalValue}
                                    >
                                        {
                                            personaldata.map(function (item, i) {
                                                return (<Option value={item.imei}>
                                                    {item.number && item.number}
                                                    {!item.number && item.company_text}
                                                </Option>)
                                            })
                                        }
                                    </Select>
                                    )}
                            </Form.Item>
                        </div>
                        <div className={Style.item}>
                            <span className={Style.btn} onClick={this.searchFun}>搜索快递员</span>

                        </div>

                    </div>


                    {/* 搜索后信息 */}
                    {this.state.isSearch && this.state.devices &&
                        <div className={Style.searchresultWrap}>
                            <div className={Style.itemTop}>

                                <span onClick={this.canclendarwShowFun}>选择查看历史日期<Icon type="down" /></span>
                                {this.state.isPoint &&
                                    <span onClick={this.travelFun}>轨迹回放</span>
                                }
                                <span onClick={this.cancelSearch}>关闭搜索</span>

                            </div>
                            <div className={Style.resultItem}>
                                <h3>
                                    {this.state.devices.realname} <span>(车辆编号：{this.state.devices.imei})</span>
                                    {this.state.devices.mobile &&
                                        <em className={Style.ri} onClick={this.tellFun}><Icon type="phone" /></em>
                                    }
                                </h3>
                                <div>
                                    <p>
                                        {this.state.devices.province_name}
                                        {this.state.devices.city_name}
                                        {this.state.devices.region_name}
                                        {this.state.devices.address}
                                    </p>
                                    {/* <p>联系方式：{this.state.devices.mobile}</p> */}
                                    <p>当前停留时间：</p>
                                </div>
                            </div>
                            {/* <div className={Style.resultItem + ' ' + Style.mt10}>
                                <h3>日期筛选</h3>
                                <div>
                                    <p>选择日期：{Moment(this.state.candendarValue * 1000).format("YYYY.MM.DD")} <Icon type="calendar" theme="outlined" onClick={this.canclendarwShowFun} /></p>

                                </div>
                            </div> */}
                        </div>
                    }
                    <div className={Style.calendarCon} style={{ display: this.state.isCalendarShow }}>
                        <span className={Style.arrow} onClick={this.cancelSearch}> <Icon type="left" /></span>
                        <Calendar fullscreen={false} onSelect={this.onSelect} />
                    </div>
                </div>


                <div className={Style.foot}>
                    <Row type="flex">
                        <Col span={8} order={1} onClick={this.mapurlFun} className={Style.on}>
                            <em className={Style.footicon + ' ' + Style.mapicon}></em>
                            <p>大屏地图</p>
                        </Col>
                        <Col span={8} order={1} onClick={this.mindexurlFun}>
                            <em className={Style.footicon + ' ' + Style.aiicon}></em>
                            <p>AI系统</p>
                        </Col>
                        <Col span={8} order={1} onClick={this.myurlFun} >
                            <em className={Style.footicon + ' ' + Style.myicon}></em>
                            <p>我的</p>
                        </Col>

                    </Row>
                </div>
                <div className={Style.marsk} style={{ display: this.state.loading }}>
                    <Icon type="loading" className={Style.loading} />
                    <p className={Style.loadText}>请耐心等待...</p>
                </div>
                <Modal
                    title=""
                    visible={this.state.isConfirm}
                    //   onOk={this.handleOk}
                    onCancel={this.handleCancel.bind(this, 'isConfirm')}
                    footer={null}
                    centered={true}
                    wrapClassName="modalConfirmWrap"
                >
                    <div className="confirmWrap">
                        <h2>{this.state.devices && this.state.devices.mobile}
                        </h2>
                        <div className="confrimFoot">
                            <span className="btn" onClick={this.handleCancel.bind(this, 'isConfirm')}>取消</span>
                            <a className="btn blue" href={"tel:" + (this.state.devices && this.state.devices.mobile)} onCancel={this.handleCancel.bind(this, 'isConfirm')}>确定</a>
                        </div>
                    </div>

                </Modal>
            </div>
        )
    }

}

App.contextTypes = {
    router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
    return {
        data: state.vehicle.data,
        personData: state.mmodel.savePersonSeslect,
        personaldata: state.mmodel.personallist,
        company: state.myHome.company,
        loading: !!state.loading.global
    }
}

function dispatchToProps(dispatch) {
    return {
        queryStatistics(payload, params) {
            dispatch({ type: 'mmodel/list', payload })
        },
        queryfineList(payload = {}) { //消息列表
            dispatch({ type: 'mmodel/msgserch', payload })
        },
        queryPersonalList(payload = {}) {
            dispatch({ type: 'mmodel/Personalserch', payload })
        },
        getCompany(payload, params) {
            dispatch({
                type: 'myHome/getCompany',
                payload
            })
        },
        saveSelect(payload = {}) {
            dispatch({ type: 'mmodel/save', payload })
        },
        savePersonalSelect(payload = {}) {
            dispatch({ type: 'mmodel/savePersonal', payload })
        },
        search(payload = {}) {
            dispatch({ type: 'mmodel/serchpersonal', payload })
        },
        queryMsgList(payload = {}) {
            dispatch({ type: 'mmodel/msgserch', payload })
        },
    }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
